<template>
  <div
    :class="prefixCls"
    class="relative h-screen w-full flex flex-col items-center justify-center bg-gray-50 dark:bg-[var(--login-bg-color)] px-10"
  >
    <!-- 顶部 logo + 系统标题（复用登录页样式） -->
    <div class="absolute top-8 left-10 flex items-center">
      <img alt="系统logo" class="mr-4 h-12 w-12" src="@/assets/imgs/logo.png" />
      <span class="text-2xl font-bold text-primary">{{ underlineToHump(appStore.getTitle) }}</span>
    </div>

    <!-- 主体内容区（带动画） -->
    <Transition appear enter-active-class="animate__animated animate__bounceIn">
      <div class="w-full max-w-md p-8 bg-white dark:bg-[var(--card-bg-color)] rounded-2xl shadow-lg">
        <!-- 成功图标 -->
        <div class="flex justify-center mb-6">
          <div class="w-20 h-20 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
            <i class="el-icon-check text-4xl text-green-500 dark:text-green-400"></i>
          </div>
        </div>

        <!-- 提示文本 -->
        <div class="text-center mb-8">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">{{ t('logout.successTitle') }}</h2>
          <p class="text-gray-600 dark:text-gray-300 text-lg">
            {{ t('logout.successDesc') }}
          </p>
          <!-- 手动关闭提示（醒目样式） -->
          <p class="mt-4 text-orange-500 dark:text-orange-400 flex items-center justify-center">
            <i class="el-icon-warning-outline mr-2"></i>
            {{ t('logout.closeTip') }}
          </p>
        </div>

        <!-- 操作按钮区 -->
        <div class="flex flex-col space-y-4">
          <!-- 关闭浏览器按钮（优先尝试自动关闭，失败提示手动） -->
          <el-button
            type="primary"
            size="large"
            @click="handleCloseBrowser"
            class="w-full"
          >
            {{ t('logout.autoCloseBtn') }}
          </el-button>

          <!-- 返回首页按钮（备选操作） -->
          <el-button
            type="default"
            size="large"
            @click="handleGoHome"
            class="w-full"
          >
            {{ t('logout.goHomeBtn') }}
          </el-button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/store/modules/app';
import { useDesign } from '@/hooks/web/useDesign';
import { underlineToHump } from '@/utils';
import router from '@/router';

defineOptions({ name: 'LogoutSuccess' });

const { t } = useI18n();
const appStore = useAppStore();
const { getPrefixCls } = useDesign();
const prefixCls = getPrefixCls('logout-success');

/**
 * 尝试自动关闭浏览器（兼容浏览器限制）
 */
const handleCloseBrowser = () => {
  // 1. 先尝试关闭当前标签页（window.close() 无返回值，直接执行）
  window.close();

  // 2. 浏览器限制：手动打开的标签页会拦截 close()，此时通过延迟检查页面是否仍存在来判断
  setTimeout(() => {
    // 若 100ms 后页面仍未关闭，说明关闭失败，提示手动操作
    ElMessageBox.alert(
      t('logout.manualCloseTip'),
      t('common.reminder'),
      {
        confirmButtonText: t('common.ok'),
        type: 'info'
      }
    );
  }, 100);
};

/**
 * 返回首页（备选操作）
 */
const handleGoHome = () => {
  router.push('/');
};
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-logout-success;

.#{$prefix-cls} {
  // 适配暗色模式
  .dark & {
    background-color: var(--app-bg-color);
  }

  // 按钮 hover 效果增强
  .el-button--primary:hover {
    opacity: 0.9;
  }
}
</style>

<!-- 全局样式补充（适配暗色模式） -->
<style lang="scss">
.dark {
  --card-bg-color: #1e293b;
  --app-bg-color: #0f172a;
}
</style>
